<template>
  <div>
    <el-button type="primary" @click="change">点击摇号</el-button>
    <br />
    <span>请输入要摇号的范围</span>
    <p>摇中的数字: {{ finishNum }}</p>
    <el-input style="width: 50px" v-model.number="num1" />至
    <el-input style="width: 50px" v-model.number="num2" />
    <div class="rollingnums-container">
      <!-- <div class="scroller-window" v-for="(item, index) in 10" :key="index">
        <div class="single-container">
          <p>5</p>
          <p>6</p>
          <p>7</p>
          <p>8</p>
          <p>9</p>
          <p>0</p>
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
          <p>6</p>
          <p>7</p>
          <p>8</p>
          <p>9</p>
          <p>0</p>
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      rollingnumsContainer: null,
      num1: null,
      num2: null,
      step: 5, //每次移动的步数
      tempNumList: [],
      finishNum: null,
    };
  },
  mounted() {
    this.rollingnumsContainer = document.getElementsByClassName(
      "rollingnums-container"
    )[0];
  },
  methods: {
    //生成摇号范围内的随机数
    randomNum(start, end) {
      return Math.floor(Math.random() * (end - start) + start);
    },
    //中间区域过渡距离
    getNormalTranslation(num) {
      return -(25 + 5 * num);
    },
    //设置移动最短距离
    moveShortestDistance(start, end) {
      let direction = -1; //-1上，1下
      let steps = 0;
      let startTansition = this.getNormalTranslation(start);
      if (start > end) {
        setDirectionAndSteps(10 - start + end, start - end);
      } else {
        setDirectionAndSteps(end - start, 10 - end + start);
      }
      startTansition += direction * steps * this.step;
      //设置移动方向和步数
      function setDirectionAndSteps(upSteps, downSteps) {
        direction = upSteps > downSteps ? 1 : -1;
        steps = upSteps > downSteps ? downSteps : upSteps;
      }
      return `translateY(${startTansition}%)`;
    },
    // 设置复位函数
    reposition({ style }, num) {
      const { animationDuration } = style;
      // console.log(style.animationDuration, "42");
      const lastAnimationLocation = `translateY(${this.getNormalTranslation(
        num
      )}%)`;
      if (style.transform !== lastAnimationLocation) {
        style.animationDuration = "0s";
        style.transform = lastAnimationLocation;
        setTimeout(() => {
          style.animationDuration = animationDuration;
        });
      }
    },
    // 点击函数
    change() {
      if (!this.num1 || !this.num2) {
        alert("请属于要摇号的范围");
        return;
      }
      console.log(this.tempNumList.length);
      if (this.tempNumList.length === 0) {
        for (let i = 0; i < (this.num2 + "").length; i++) {
          this.tempNumList.push(0);
        }
        console.log(this.tempNumList, 2255);
      }
      this.finishNum = this.randomNum(this.num1, this.num2) + "";
      console.log(this.finishNum, "finishNum");
      let finishNumList = this.finishNum.split("");
      finishNumList = finishNumList.map((item) => item * 1);
      this.rollingnumsContainer.innerHTML = "";
      for (let i = 0; i < finishNumList.length; i++) {
        let div = document.createElement("div");
        div.className = "scroller-window";
        div.innerHTML = `
          <div class="single-container">
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>0</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>0</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
          </div>
        `;
        this.rollingnumsContainer.appendChild(div);
      }
      let scrollerList = document.getElementsByClassName("single-container");
      scrollerList = Array.from(scrollerList);
      console.log(this.tempNumList, "this.tempNumList");
      scrollerList.forEach((scroll, index) => {
        const startNum = this.tempNumList[index] * 1;
        scroll.start = startNum;
        scroll.style.transform = `translateY(
          ${this.getNormalTranslation(scroll.start)}%
        )`;
      });
      setTimeout(() => {
        scrollerList.forEach((scroll, index) => {
          const endNum = finishNumList[index] * 1;
          // console.log(finishNumList, index, 111);
          scroll.end = endNum;
          console.log(scroll.start, scroll.end, "start,end");
          scroll.style.transform = this.moveShortestDistance(
            scroll.start,
            scroll.end
          );
          scroll.addEventListener("transitionend", ({ target }) => {
            this.reposition(target, scroll.end);
          });
          this.tempNumList = finishNumList;
        });
      });
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.rollingnums-container {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  .scroller-window {
    margin: 20px;
    overflow: hidden;
    height: 40px;
    border-radius: 20px;
    border: 1px palegoldenrod solid;
    width: 15%;
    background-color: aquamarine;
    .single-container {
      transition: transform 1s;
      p {
        font-weight: bold;
        line-height: 40px;
        font-size: 20px;
        // height: 100%;
      }
    }
  }
}
</style>
